<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.global.js"></script>
</head>

<body>

    <div id="app">
        劳资是根组件
        <component-a></component-a>
        <component-b></component-b>
        <component-c></component-c>
    </div>

    <script>
        const ComponentA = {
            template: `<h3>ComponentA</h3>`
        }
        const ComponentB = {
            template: `<h3>ComponentB</h3>`
        }
        const ComponentC = {
            template: `<h3>ComponentC</h3>`
        }

        const app = Vue.createApp({

            /*局部注册*/
            // components: {
            //     'component-a': ComponentA,
            //     'component-b': ComponentB
            // }

            components: {
                ComponentA,
                ComponentB,
                ComponentC,
            }

        })

        app.mount("#app")
    </script>

</body>

</html>